<template>
	<view class="goods-detail-info m-20 p-20 radius-20 bg-white">
		<view class="price-box" v-if="props.isActivityGoods">
			<view class="price-content">
				<view class="price">
					<text class="symbol">￥</text>{{ props.goodsDetailData?.activityPrice }}
				</view>
			</view>
			<!-- 倒计时给活动留的口子 -->
			<slot name="countDown"></slot>
		</view>
		<view class="price-box" v-else>
			<view class="price-content">
				<view class="price"
					v-if="props.goodsDetailData?.minPrice && props.goodsDetailData?.maxPrice && props.goodsDetailData?.minPrice != props.goodsDetailData?.maxPrice">
					<text class="symbol">￥</text>{{ props.goodsDetailData?.minPrice }} ~
					<text class="symbol">￥</text>{{ props.goodsDetailData?.maxPrice }}
				</view>
				<view class="price" v-else>
					<text class="symbol">￥</text>{{ props.goodsDetailData?.price }}
				</view>
				<view class="line-price" v-if="props.goodsDetailData?.mktprice">
					<text class="symbol">￥</text>{{ props.goodsDetailData.mktprice }}
				</view>
			</view>
		</view>

		<!-- 积分兑换价格 -->
		<Point v-if="!props.isActivityGoods" :flex="true" :data="props.goodsDetailData?.product" fontSize="24rpx"></Point>

		<view class="name-box" v-if="props.goodsDetailData?.name || props.goodsDetailData?.brief">
			<view class="name">{{ props.goodsDetailData?.name }}</view>
			<view class="brief">{{ props.goodsDetailData?.brief }}</view>
		</view>
		<view class="tag-box" v-if="props.goodsDetailData?.brand || props.goodsDetailData?.labels?.length > 0">
			<view class="m-r-10 m-b-10">
				<uv-tags :text="props.goodsDetailData?.brand?.name"></uv-tags>
			</view>
			<view class="m-r-10 m-b-10" v-for="item, index in props.goodsDetailData?.labels" :key="index">
				<uv-tags :text="item.name" :bgColor="item.style" :borderColor="item.style"></uv-tags>
			</view>
		</view>
		<view class="stock-box">
			<view class="item">
				<view class="lab">销量</view>
				<view class="val">{{ props.goodsDetailData?.buyCount || 0 }}</view>
			</view>
			<view class="item">
				<view class="lab">库存</view>
				<view class="val">{{ props.goodsDetailData?.stock || 0 }}</view>
			</view>
			<view class="item" @click="handleToggleShowShare">
				<view class="icon">
					<uv-icon name="share-fill" color="#E1E5E9" :size="20"></uv-icon>
				</view>
				<view class="val">
					分享
				</view>
			</view>
			<view class="item" @click="handleToggleGoodsCollection">
				<view class="icon">
					<uv-icon v-if="state.isFav" name="heart-fill" color="#D33123" :size="20"></uv-icon>
					<uv-icon v-else name="heart-fill" color="#E1E5E9" :size="20"></uv-icon>
				</view>
				<view class="val">
					收藏
				</view>
			</view>
		</view>

		<!-- 分享弹框 -->
		<CoreshopShare :show="state.showShare" :shareType="props.shareType" :goodsDetailData="props.goodsDetailData"
			@handleClosePopup="handleToggleShowShare"></CoreshopShare>
	</view>
</template>

<script setup lang="ts">
	import { reactive, watch } from 'vue';
	import { queryGoodsCollection } from '@/core/api';
	import { ShareEnum } from '@/core/enum';
	import Point from '@/pages/components/custom-page/components/home-goods/point.vue';
	import { handleShowToast } from '@/core/utils';
	import CoreshopShare from '@/components/coreshop-share/coreshop-share.vue'; 
	import { useLoginStore } from '@/core/store';

	/** 登录store */
	const _useLoginStore = useLoginStore();

	const props = withDefaults(defineProps<{
		goodsDetailData : any,
		isActivityGoods : boolean,
		shareType : ShareEnum,
	}>(), {
		goodsDetailData: {},
		isActivityGoods: false,
		shareType: ShareEnum.index,
	});

	const state = reactive<{
		isFav : boolean;
		showShare : boolean;
	}>({
		isFav: false,
		showShare: false,
	}); 

	watch(() => props.goodsDetailData, (newVla : any) => {
		if (newVla) {
			state.isFav = newVla.isFav;
		}
	});

	const handleToggleGoodsCollection = () => {
		_useLoginStore.checkLogin(async () => {
			const goodsCollection = await queryGoodsCollection({ id: props.goodsDetailData.id });
			if (goodsCollection.status) {
				state.isFav = !state.isFav;
				handleShowToast(goodsCollection.msg, 'success');
			} else {
				handleShowToast(goodsCollection.msg);
			}
		});
	}

	/** 分享弹框显示与否 */
	const handleToggleShowShare = () => {
		_useLoginStore.checkLogin(() => {
			state.showShare = !state.showShare;
		});  
	}
</script>

<style lang="scss" scoped>
	@import './goods-detail-info.scss';
</style>